<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>大连海事大学羽毛球场预订系统</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="大连海事大学,羽毛球场预订,羽毛球，大连海事大学体育馆">
<meta http-equiv="description" content="大连海事大学羽毛球场预订系统">

<link rel="stylesheet" type="text/css" href="http://sumihui:8080/DMUBadmintonCourtBookSys/bootstrap/css/bootstrap.min.css">
<script src="http://sumihui:8080/DMUBadmintonCourtBookSys/bootstrap/js/jquery-2.2.2.min.js"></script>
<script src="http://sumihui:8080/DMUBadmintonCourtBookSys/bootstrap/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="http://sumihui:8080/DMUBadmintonCourtBookSys/bootstrap/css/bootstrap.css">
<link rel="shortcut icon" href="http://sumihui:8080/DMUBadmintonCourtBookSys/icon/dmu.png" />
<style type="text/css">
.container-fluid{background:#6f5499;color:#fff;}
.media-object{width:60px;height:60px;border-radius:30px;}

/* .col-lg-2,.col-lg-4,.col-lg-6,.col-lg-12{padding:15px 0;} */
.col-lg-2,.col-lg-4,.col-lg-6,.col-lg-12{padding:0;}
/*row 42px 253px 
col 72 388 198*/
.court {background:#2E8B57; display: grid; grid-template-rows: 8.4px 50.6px 50.6px 8.4px;
grid-template-columns: 14.5px 77.6px 39.6px 39.6px 77.6px 14.5px; padding:15px;
border:1px solid #fff; justify-content: center; align-content: center; }	/*transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; */
.court > div { border: solid rgba(255,255,255,0.3); border-width: 0.8px 0 0 0.8px; transition: all 0.5s; cursor: pointer;  }
/* .court > div:hover { background: #fff; } */.court:hover{background:#458B74;}
.court > div:nth-child(6), .court > div:nth-child(12), .court > div:nth-child(16), .court > div:nth-child(22) { border-right-width: 1px; }
.court > div:nth-last-child(-n+6) { border-bottom-width: 1px; }
.court > div:nth-child(9), .court > div:nth-child(10) { grid-row: 2/4; }
.court > div:nth-child(9) { grid-column: 3; }
.court > div:nth-child(10) { grid-column: 4; }



.centercourt {background:#3AA371; display: grid; grid-template-columns: 8.4px 50.6px 50.6px 8.4px;
grid-template-rows: 14.5px 77.6px 39.6px 39.6px 77.6px 14.5px; padding:15px;
border:2px groove #fff; justify-content: center; align-content: center;}	/*transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; */
.centercourt > div { border: solid rgba(255,255,255,0.3); border-width: 0.8px 0 0 0.8px; transition: all 0.5s; cursor: pointer;  }
/* .court2 > div:hover { background: #fff; } */.centercourt:hover{background:#458B74;}
.centercourt > div:nth-child(4), .centercourt > div:nth-child(8), .centercourt > div:nth-child(11), .centercourt > div:nth-child(14), .centercourt > div:nth-child(18), .centercourt > div:nth-child(22) { border-right-width: 1px; }
.centercourt > div:nth-last-child(-n+4) { border-bottom-width: 1px; }
.centercourt > div:nth-child(10), .centercourt > div:nth-child(13) { grid-column: 2/4; }
.centercourt > div:nth-child(10) { grid-row: 3/4; }
.centercourt > div:nth-child(13) { grid-row: 4/5; }



.court2 {background:#218868; display: grid; grid-template-columns: 8.4px 50.6px 50.6px 8.4px;
grid-template-rows: 14.5px 77.6px 39.6px 39.6px 77.6px 14.5px; padding:15px;
border:2px groove #fff; justify-content: center; align-content: center;}	/*transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; */
.court2 > div { border: solid rgba(255,255,255,0.3); border-width: 0.8px 0 0 0.8px; transition: all 0.5s; cursor: pointer;  }
/* .court2 > div:hover { background: #fff; } */.court2:hover{background:#458B74;}
.court2 > div:nth-child(4), .court2 > div:nth-child(8), .court2 > div:nth-child(11), .court2 > div:nth-child(14), .court2 > div:nth-child(18), .court2 > div:nth-child(22) { border-right-width: 1px; }
.court2 > div:nth-last-child(-n+4) { border-bottom-width: 1px; }
.court2 > div:nth-child(10), .court2 > div:nth-child(13) { grid-column: 2/4; }
.court2 > div:nth-child(10) { grid-row: 3/4; }
.court2 > div:nth-child(13) { grid-row: 4/5; }



.mark{position:absolute;left:5%;top:5%;z-index:1;}



</style>
</head>

<body>
<div class="container-fluid">
	<div class="container">
			<div class="media">
				<div class="media-left media-bottom"><img class="media-object" src="icon/dmu.png" alt="DMU">
				</div>
				<div class="media-body">
					<h3>大连海事大学体育馆&nbsp; &nbsp; &nbsp;室内羽毛球场预订系统</h3>
					Dalian Maritime University Gymnasium Indoor Badminton Court Book System
				</div>				
			</div>
		</div>
</div>

<div class="page-header">
	<div class="container">
		<ul class="nav nav-tabs nav-justified">
			<li role="presentation"><a href="#">主页</a></li>
			<li role="presentation"><a href="#">通知公告</a></li>
			<li role="presentation"><a href="#">展位待定</a></li>
		</ul>
	</div>
</div>

	<div class="container">
		<div class="row">
			<!-- 左侧的两块场地 -->
			<div class="col-lg-2">
				<div class="col-lg-12">
					<div class="court2">
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
					</div>
					<span class="mark badge">5</span>
				</div>
				<div class="col-lg-12">
					<div class="court2">
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
					</div>
					<span class="mark badge">6</span>
				</div>
			</div>
			
			<!-- 中左的四块场地 -->			
			<div class="col-lg-4">
				<div class="col-lg-12">
					<div class="court">
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
					</div>
					<span class="mark badge">11</span>
				</div>
				<div class="col-lg-6">
					<div class="centercourt">
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
					</div>
					<span class="mark badge">1</span>
				</div>
				<div class="col-lg-6">
					<div class="centercourt">
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
					</div>
					<span class="mark badge">2</span>
				</div>
				<div class="col-lg-12">
					<div class="court">
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
					</div>
					<span class="mark badge">&nbsp;9</span>
				</div>
			</div>
			<!-- 中右的四块场地 -->
			<div class="col-lg-4">
				<div class="col-lg-12">
					<div class="court">
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
					</div>
					<span class="mark badge">12</span>
				</div>
				<div class="col-lg-6">
					<div class="centercourt">
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
					</div>
					<span class="mark badge">3</span>
				</div>
				<div class="col-lg-6">
					<div class="centercourt">
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
					</div>
					<span class="mark badge">4</span>
				</div>
				<div class="col-lg-12">
					<div class="court">
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
					</div>
					<span class="mark badge">10</span>
				</div>
			</div>
			<!-- 右侧的两块场地 -->
			<div class="col-lg-2">
				<div class="col-lg-12">
					<div class="court2">
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
					</div>
					<span class="mark badge">8</span>
				</div>
				<div class="col-lg-12">
					<div class="court2">
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
						<div></div>		<div></div>		<div></div>		<div></div>		<div></div>		<div></div>
					</div>
					<span class="mark badge">7</span>
				</div>
			</div>
		</div>
	</div>





	<!-- 	<div class="container">
		通知公告栏：
		<hr>
		说明领域模型：
		角色:	用户群体{校内（学生、教职工）；校外人员、教职工家属}<br>
		实体：场地{塑胶场地、普通场（hard court）}<br>
		业务：预订、取消、确认到场、校验预订信息<br>
		开放时间：每周一、二、四 17:30~19:30，每周末13:00~20:00，节假日及活动循通知<br>
		通知公告<br>
		需要确认的事情：计价方式与持证人数的关系；自助预订系统 or 柜台电话预约管理系统？
	</div> -->
	
	
	<!-- 添加页脚信息 -->
	<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>
